<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" v-model="searchKey" placeholder="搜索书籍" @confirm="searchBooks" />
		</view>
		
		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots autoplay circular>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.image" mode="aspectFill" @click="handleBannerClick(item)"></image>
			</swiper-item>
		</swiper>
		
		<!-- 推荐书籍 -->
		<view class="recommend">
			<view class="section-title">推荐书籍</view>
			<view class="book-list">
				<view class="book-item" v-for="(book, index) in recommendBooks" :key="index" @click="goToDetail(book)">
					<image :src="book.cover" mode="aspectFill"></image>
					<view class="book-info">
						<text class="book-name">{{book.name}}</text>
						<text class="book-author">{{book.author}}</text>
						<text class="book-desc">{{book.description}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: '',
				bannerList: [
					{ image: '/static/index/banner/1.jpg', id: 1 },
					{ image: '/static/index/banner/2.jpg', id: 2 },
					{ image: '/static/index/banner/3.jpg', id: 3 }
				],
				recommendBooks: [
					{
						id: 1,
						name: '三体',
						author: '刘慈欣',
						cover: '/static/index/1.jpg',
						description: '科幻小说代表作'
					},
					{
						id: 2,
						name: '三体',
						author: '刘慈欣',
						cover: '/static/index/1.jpg',
						description: '科幻小说代表作'
					},
					{
						id: 3,
						name: '三体',
						author: '刘慈欣',
						cover: '/static/index/1.jpg',
						description: '科幻小说代表作'
					},
					
				]
			}
		},
		methods: {
			searchBooks() {
				// 实现搜索功能
				console.log('搜索关键词：', this.searchKey)
			},
			handleBannerClick(item) {
				// 处理轮播图点击
				console.log('点击了轮播图：', item)
			},
			goToDetail(book) {
				console.log("123");
				switch(book.id){
					case 1:
					uni.navigateTo({
						url:'/pages/index/detail'
					});
					break;
					case 2:
					uni.navigateTo({
						url:'/pages/index/deatil1'
					});
					break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		
		.search-box {
			padding: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			
			input {
				height: 70rpx;
				background: #f5f5f5;
				border-radius: 35rpx;
				padding: 0 30rpx;
			}
		}
		
		.banner {
			height: 300rpx;
			margin: 20rpx 0;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		
		.recommend {
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}
			
			.book-list {
				.book-item {
					display: flex;
					padding: 20rpx;
					background: #fff;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					
					image {
						width: 180rpx;
						height: 240rpx;
						border-radius: 10rpx;
					}
					
					.book-info {
						flex: 1;
						margin-left: 20rpx;
						
						.book-name {
							font-size: 28rpx;
							font-weight: bold;
						}
						
						.book-author {
							font-size: 24rpx;
							color: #666;
							margin: 10rpx 0;
						}
						
						.book-desc {
							font-size: 24rpx;
							color: #999;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
